<template>
  <div class="hovtitle">
    <el-row>
      <el-col :span="6" style="height: 3.75rem;text-align: right;
     ">
        <img src="../../assets/pc/homeIcon.png" alt="">
      </el-col>
      <el-col :span="13" class="title">
        <div v-for="(item,index) in title" :key="index" @click="link_to(item.url)">
          <div class="title_bottom">{{item.name}}</div>
        </div>
      </el-col>
      <el-col :span="5">
        <el-row class="heard_right_top">
          <!-- <el-col :span="12" ></el-col> -->
          <el-col :span="24" class="name"> {{dpxx.shop_name?dpxx.shop_name:'获取失败'}}<img src="../../assets/dates/1_1.svg" alt=""></el-col>
        </el-row>
        <el-row class="heard_right_bottom">
          <el-col :span="24">
            <div>ID {{dpxx.shop_id?dpxx.shop_id:'获取失败'}}</div>
           
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import html2canvas from 'html2canvas';
  import axios from 'axios'
  export default {
    data() {
      return {
        dpxx:{},
        title: [
          {
            name: '首页',
            url:'/'
          },
          {
            name: '一键诊断',
            url:'/'
          },
          {
            name: '报表下载',
            url:''
          },
          {
            name: '插件下载',
            url:'/cj'
          },
          {
            name: '抖店服务市场',
            url:'https://fuwu.jinritemai.com/detail?service_id=25328'
          },
        ]
      };
    }, 
    created: function () {
      var that=this
      axios({
                method: 'get',
                url: 'http://doudian-api.fd1.cc/api/shop_info?shop_id=' + this.$store.state.shop_id
            })
                .then(function (response) { 
                  
                  if(response.data.code==0){
                    that.dpxx=response.data.data.data
                  that.$store.dpxx=response.data.data.data
                  }
                   console.log('店铺信息',response.data.data.data)
                  
                })
                .catch(function (error) {
                    console.log(error)
                })
    },
    methods: {
      link_to(url){
        if(url){
          if(url.length>10){
            window.open(url, '_blank')
          }else{
            this.$confirm('即将跳转, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push(url)
        }).catch(() => {
                  
        });
           
          }
          
        }else{
          html2canvas(document.body).then(canvas => {
        let dataURL = canvas.toDataURL("image/png");
        this.dataURL = dataURL;
        let creatDom = document.createElement("a");
 
        document.body.appendChild(creatDom);
 
        creatDom.href = dataURL;
 
        creatDom.download = "智能诊断报表";
 
        creatDom.click();

          })
        }
       
        console.log(url)
      },
      Clue_fk() {
        this.$router.push('/about')
      },
      Clue_gl() {
        this.$router.push('/rygl')
      }
    }
  }
</script>
<style lang="less">
.hovtitle:hover{
  background-color: #fff;
  box-shadow: 0px 12px 10px #f1829a80
}
.title_bottom:hover{
  color: rgb(0, 119, 255);
}
  .title_bottom:hover{
    cursor: pointer;
  }
  .title {
    display: -webkit-inline-box;
    line-height: initial;
    /* color: #77a3e4; */
    font-weight: bold;
    height: 3.75rem;

    div {
      margin: 0px .375rem;
      line-height: 3.75rem;

    }
  }

  .heard_right_top {
    display: flex;
    align-items: center;

    .name {
      font-weight: bold;
      font-size: 18px;
      color: #8d8080;
    }

    img {
      width: 40px;
      height: 40px
    }
  }

  .heard_right_bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    color: darkgrey;

  }
</style>